<template>
  <div>
    <!-- 订单页 -->
      <common-head title="这是您的订单喔！"/>
      <div class="wrap">
      <!-- {{contacts}} -->
        <!-- 联系人 -->
        <van-contact-card
          :type="contactType"
          :name="contacts[0].name"
          :tel="contacts[0].tel"
          @click="onEdit"
        />
        <!-- /联系人 -->
        <!-- 商品 -->
        <div class="items">
          <div class="item" v-for="item in newOrder.items" :key="item.id">
            <!-- 当前订单的信息 -->
            <!-- {{newOrder}} -->
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            />
          </div>
        </div>
        <!-- /商品 -->
      </div>
      <van-submit-bar :price="newOrder.total*100" button-text="赶快付钱哦！！！" @submit="onSubmit" />
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
// 导入vuex
import { mapState } from 'vuex'
export default {
  methods: {
    onSubmit () {
      // 提交时跳出
      alert('已经购买商品')
    },
    onEdit () {
      // 点击跳转到联系人列表页
      if (this.contactType === 'edit') {
        this.$router.push('/contactLists')
      } else {
        // z
      }
    }
  },
  components: {
    CommonHead
  },
  computed: {
    // vuex助手函数
    ...mapState({
      // 取出vuex中当前订单的数据state.order.newOrder
      newOrder: state => state.order.newOrder,
      // vuex中的联系人
      people: state => state.order.people,
      contacts: state => state.contact.contacts
    }),
    contactType () {
      return this.people ? 'edit' : 'add'
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 100px;
  padding-bottom: 50px;
}
</style>
